<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>fam</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <!--引入字体图标相关的样式文件-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!--mi is Q-->
    <link rel="stylesheet" href="qcss/Q_tou03-1.css">

    <!--    layui-->
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <style>
        .container-fluid{
            padding: 20px;
        }
        /*头部样式颜色修改*/
        .Tou a{
            color: black;
        }
        header>div{
            width: 100%;
            height: 80px;
            /*background-color:pink ;*/
            /*头部阴影样式*/
            box-shadow: 0px 2px 10px 5PX #b5b4b3;
        }
        /*-----------------------------------------------------------------------*/
        .We {
            width: 100%;
            height: 100px;
            top: -100px;
            border-radius: 5px;
            background-color: #2f3035;
        }

        body {
            /*width: 100%;*/
            /*background-color: #2f3035;*/
            /*background: url("img_user/t02.jpg") center 0 no-repeat;*/
            /*background-size: 100% 100%;*/
        }

        /*------------------------------------------------------------------------------------------------*/
        .navbar {
            width: 100%;
            margin: 0 auto;
            z-index: 10;
        }

        /*-------身体上部分------------------------------------------------------------------------------------*/
        .SH {
            /*width: 100%;*/
            /*height: 100%;*/
            padding-top: 50px;
            /*background-color: crimson;*/
        }


        .SH_X {
            width: 100%;
            height: 200px;
            /*background: url("img_user/t01.jpg");*/
            /*background-size: 50%;*/
            border-radius: 20px;
            margin-bottom: 10px;
            padding-top: 20px;
            padding-left: 100px;
        }

        .SH_XTU {
            width: 140px;
            height: 140px;
            float: left;
            margin-right: 50px;
            /*height: 100px;*/
            /*margin: 48px auto 0;*/
        }

        .SH_XTU img {
            width: 140px;
            height: 140px;
        }

        .SH_XWB {
            /*text-align: center;*/
            color: plum;
            margin-top: 20px;
        }

        /*--下部分-------------------------------------------------------------------------------------*/

        /*中部*/
        .SH_S-X {
            width: 600px;
            height: 1000px;
            padding-left: 10px;
            /*background-color: plum;*/
            float: left;
        }

        .SH_S-X1 {
            width: 100%;
            height: 800px;
        }

        .SH_S-X1 ul {
            list-style: none;
            padding-left: 0;
        }

        .SH_S-Xli1 {
            width: 100%;
            height: 60px;
            padding: 5px 16px;
            position: relative;
            min-height: 50px;
            border-radius: 5px;
            background-color: #d6d5d3;
        }

        .SH_S-Xli1-img {
            width: 50px;
            height: 50px;
            float: left;
            margin-right: 12px;
        }

        .SH_S-Xli1-img img {
            width: 50px;
            height: 50px;
        }

        .SH_S-Xli1-img2 {
            float: right;
        }


        .SH_S-Xli1-img3 {
            padding: 10px;
        }

        .SH_S-Xli2 {
            width: 100%;
            /*height: 800px;*/
            color: #002f50;
            border-radius: 5px;
            overflow: hidden;
            padding: 20px;
            margin-top: 2px;
            background-color: #d6d5d3;
        }

        .SH_S-Xlimg {
            width: 100%;
        }


        /*右边栏目------------------------------------------------------------------------------*/
        .solid {
            position: fixed;
            width: 80px;
            height: 197px;
            top: 50%;
            right: 10px;
            margin-top: -98px;
        }

        .solid div {
            width: 80px;
            height: 10px;
            background-color: #d6d5d3;
            text-align: center;
            padding: 15px 0;
            border-bottom: 1px solid #002f50;
        }

        .solid-6 {
            border-radius: 5px;
            margin-bottom: 7px;
        }

        .solid div:hover {
            background-color: deeppink;
        }

        .solid a {
            color: #2f3035;
        }

        /*.container{*/
        /*    width: 100%;*/
        /*    !*height: 6000px;*!*/
        /*    background-color: blue;*/
        /*}*/

        /*-左栏目-----------------------------------------------------------------------------*/

        .SH_S-S {
            width: 200px;
            background-color: #d6d5d3;
            float: left;
            padding: 2px 0;
            border-radius: 10px;
            overflow: hidden;
        }

        .SH_S-S ul {
            padding-left: 0;
            list-style: none;
            margin-bottom: 0;
        }

        .SH_S-S1 {
            width: 100%;
            height: 50px;
            /*background-color: #00faf0;*/
        }

        .SH_S-Si {
            width: 16px;
            height: 16px;
            padding: 10px;
            margin-right: 30px;
            float: left;
        }

        .SH_S-ss {
            width: 180px;
            padding: 10px;
        }

        /*右栏目-------------------------------------------------------------------------------------*/
        .SH_S-Z {
            width: 300px;
            float: left;
            border-radius: 5px;
            margin-left: 10px;
            overflow: hidden;
            background-color: #d6d5d3;
        }

        .SH_S-Z-1 {
            width: 100%;
            height: 30px;
            background-color: #b5b4b3;
        }

        .SH_S-Z-11 {
            float: left;
            width: 100px;
            padding: 5px 0;
            text-align: center;
        }

        .SH_S-Z-12 {
            float: right;
            width: 100px;
            padding: 5px 0;
            text-align: center;
        }

        .SH_S-Z-2 {
            width: 100%;
            padding-top: 5px;
        }

        .SH_S-Z-TU {
            width: 100%;
            padding: 0 5px;
        }

        .SH_S-Z-TU ul {
            list-style: none;
            padding-left: 0;
        }

        .SH_S-Z-WZ {
            height: 30px;
        }

        .SH_S-Z-WZ span {
            float: right;
            color: royalblue;
        }

        .btn {
            float: right;
        }

        /*   评论区 ================================================================*/
        .SH_S-Xli2-PL {
            padding-top: 5px;
        }

        .SH_S-Xli2-Pl {
            margin-top: 5px;
            padding-left: 5px;
            padding-right: 5px;
            color: black;
            border-radius: 5px;
            background-color: pink;
        }

    </style>
</head>
<body>
<!--container导航条开始-->
<header class="Tou">
    <div>
        <nav class="navbar">
            <div class="container-fluid">
                <!-- 品牌和切换得到更好的移动显示分组 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <img width="80px" src="img/logoz.png" alt="">
                    <!--                    <a class="navbar-brand" href="#">红猪</a>-->
                </div>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="板凳长板凳短">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <!-- 收集用于切换的导航链接、表单和其他内容 -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">推荐</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                               aria-expanded="false">发布 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">创作视频</a></li>
                                <li><a href="#">个人视频浏览</a></li>
                                <li><a href="#">视频分享</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">发布文案</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">上传文件</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">个人中心</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle glyphicon" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                <p><span class="glyphicon glyphicon-plus"></span></p>
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <!--                    &lt;!&ndash;发送按钮&ndash;&gt;-->
                    <!--                    <li id="LK">-->
                    <!--                        <div class="zuoyanse"></div>-->
                    <!--                        <a class="_79aef3e4b9626a7053d54945b3c76ff1-scss LK_A" href="#">-->
                    <!--                            <div class="LK_Ja"></div>-->
                    <!--                            <span>发布</span></a>-->
                    <!--                        <div class="youyanse"></div>-->
                    <!--                    </li>-->
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

    </div>

</header>
<section class="well container">
    <div class="SH">
        <!--大上部分-->
        <div class="SH_X">
            <div class="SH_XTU"><img class="img-circle" src="img_user/t04.jpg" alt=""></div>
            <div class="SH_XWB"><h1 class="">啦啦你个大冬瓜</h1></div>
            <div class="SH_XWB" id="SH_XW"><a href="">一句话介绍一下自己吧，让别人更了解你</a></div>
        </div>
        <!-- 大下部分-->
        <div class="SH_S">
            <!--左部功能栏-->
            <div class="SH_S-S">
                <ul>
                    <li class="SH_S-S1">
                        <a href="">
                            <div class="SH_S-Si"><i class="glyphicon glyphicon-user"></i></div>
                            <div></div>
                            <div class="SH_S-ss"><span>好友状态</span></div>
                        </a>
                    </li>
                    <li class="SH_S-S1">
                        <a href="">
                            <div class="SH_S-Si"><i class=" glyphicon glyphicon-heart"></i></div>
                            <div></div>
                            <div class="SH_S-ss"><span>收藏</span></div>
                        </a>
                    </li>
                    <li class="SH_S-S1">
                        <a href="" class="">
                            <div class="SH_S-Si"><i class="glyphicon glyphicon-asterisk"></i></div>
                            <div></div>
                            <div class="SH_S-ss"><span>创作</span></div>
                        </a>
                    </li>
                    <li class="SH_S-S1">
                        <a href="" class="">
                            <div class="SH_S-Si"><i class="glyphicon glyphicon-envelope"></i></div>
                            <div></div>
                            <div class="SH_S-ss"><span>设置</span></div>
                        </a>
                    </li>
                    <li class="SH_S-S1">
                        <a href="" class="">
                            <div class="SH_S-Si"><i class="glyphicon glyphicon-cog"></i></div>
                            <div></div>
                            <div class="SH_S-ss"><span>好友状态</span></div>
                        </a>
                    </li>
                </ul>
            </div>
            <!--中部作品-->
            <div class="SH_S-X">
                <div class="SH_S-X1">
                    <ul>
                        <li class="">
                            <!--上-->
                            <div class="SH_S-Xli1">
                                <div class="SH_S-Xli1-img"><a href="">
                                    <img class="img-circle" src="img_user/t04.jpg" alt=""></a></div>
                                <div class="SH_S-Xli1-img2">
                                    <ul class=" nav-pills">
                                        ...
                                        <li role="presentation" class="dropdown">
                                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                                               aria-haspopup="true" aria-expanded="false">
                                                <!--Dropdown--> <span class="caret"></span>
                                            </a>
                                            <ul class="dropdown-menu">收藏</ul>
                                        </li>
                                        ...
                                    </ul>
                                </div>
                                <div class="SH_S-Xli1-img3">
                                    <a href="" class="">玛卡巴卡</a>
                                </div>
                            </div>
                            <!--下-->
                            <div class="SH_S-Xli2" id="text_usera">
                                <div><span>宝贝们 来干饭啦！！！<br>撸一顿KFC,冲冲冲！！！！<br>划重点，这是最新码！扫新码得大包！！</span></div>
                                <div class="SH_S-Xlimg" style="overflow: hidden;margin:30px 0">
                                    <!--img-responsive center-block:设置响应式图片 并居中-->
                                    <img class="" src="img_user/t-1.jpg" alt="" style="width: 300px;height: 300px;">
                                </div>
                                <hr>
                                <div>
                                    <span>{{"谁"}}发布于{{"2021.9.13"}}</span>
                                    <!--pull-right:让元素显示到右侧(Bootstrap提供)-->
                                    <span class="pull-right">
                                        <span class="fa fa-eye">{{"浏览人数"}}</span>
                                        <span class="fa fa-thumbs-o-up">{{"点赞人数"}}</span>
                                    </span>
                                </div>
                                <!--点赞评论-->
                                <!--center-block:让元素居中(Bootstrap提供)-->
                                <button class="btn btn-info" @click="like1()">点赞</button>
                                <button class="btn btn-info" @click="like2()">评论</button>
                                <!--评论区-->
                                <div class="SH_S-Xli2-PL" v-if="user==null">
                                    <form action="" style="color: black">
                                        <input type="text" name="text" placeholder="评论" size="50" @keydown.enter="search()">
                                        <input type="button" value="发送" @click="upload()">
                                    </form>
                                    <div class="SH_S-Xli2-Pl"><span class="glyphicon glyphicon-sunglasses">谢老板</span>
                                        <p>评论区......</p></div>
                                    <div class="SH_S-Xli2-Pl"><span class="glyphicon glyphicon-sunglasses">谢老板</span>
                                        <p>评论区......</p></div>
                                    <div class="SH_S-Xli2-Pl"><span class="glyphicon glyphicon-sunglasses">谢老板</span>
                                        <p>评论区......</p></div>
                                    <div class="SH_S-Xli2-Pl"><span class="glyphicon glyphicon-sunglasses">谢老板</span>
                                        <p>评论区......</p></div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--右部推荐-->
            <div class="SH_S-Z">
                <!--推荐头-->
                <div class="SH_S-Z-1">
                    <div class="SH_S-Z-11"><a href="" style="font-weight: bold">热门推荐</a></div>
                    <a href="" style="font-weight: bold;height: 14px;">
                        <div class="SH_S-Z-12 glyphicon glyphicon-refresh" style="color: dodgerblue;"> 换一换</div>
                    </a>
                </div>
                <!--内容-->
                <div class="SH_S-Z-2">
                    <!--每个循环,没人的信息-->
                    <div class="SH_S-Z-TU">
                        <!--文字-->
                        <ul>
                            <li class="SH_S-Z-WZ">
                                <p><span class="fa fa-eye">浏览量</span><a href="">Tom</a></p>
                            </li>
                            <li class="SH_S-Z-WZ">
                                <p><span class="fa fa-eye">浏览量</span><a href="">海绵宝宝</a></p>
                            </li>
                            <li class="SH_S-Z-WZ">
                                <p><span class="glyphicon glyphicon-fire">浏览量</span><a href="">派大星</a></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 右边固定栏目 -->
<div class="solid">
    <div class="solid-6  glyphicon glyphicon-triangle-top"><a href=""><img src="" alt=""></a></div>
    <div><a href=""><img src="" alt="">顶部</a></div>
    <div><a href=""><img src="" alt="">上</a></div>
    <div><a href=""><img src="" alt="">中</a></div>
    <div><a href=""><img src="" alt="">下</a></div>
</div>

<div class="We"></div>
<footer class="container">

</footer>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入vue框架-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--moment-->
<script src="JS/moment_min.js"></script>
<!--外部js-->
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<!--弹窗-->
<!-- 加载sweetalert -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
<!--引入瀑布流相关js文件-->
<script src="JS/imagesloaded.pkgd.js"></script>
<script src="JS/masonry.pkgd.min.js"></script>
<script>
    let v = new Vue({
        el: "#text_usera",
        data: {
            user: "",
            wb: ''
        },
        methods: {
            like1: function () {
                v.user = ""
            }, like2: function () {
                v.user = null
            }, search: function () {
                if (v.wb == "") {
                    alert("请输入搜索内容!")
                    return;
                }
                // location.href = "/index-10.html?wd=" + d_v.wb;
            },
            upload:function () {
                let data = new FormData(document.querySelector("form"))
                axios.post("/usera/insert",data).then(function (response) {
                    alert("发送成功!")
                })
            }
        }
    })
</script>
</body>
</html>